import { setItem } from './storage'
/**
 * 
 * @param {String} el 选择器
 * @param {*} option 配置对象 { lineNum:干扰线数量 ,textLen:验证码长度 ,width:画布宽 ,height:画布高 }
 */
function Gcode(el, option) {

    this.el = typeof el === "string" ? document.querySelector(el) : el;

    this.option = option || {};

    this.text = ""

    this.init();


}

Gcode.prototype = {

    constructor: Gcode,

    init: function () {

        if (this.el.getContext) {
            var ctx = this.el.getContext("2d"),

                // 设置画布宽高

                cw = this.el.width = this.option.width || 90,

                ch = this.el.height = this.option.height || 30,

                textLen = this.option.textLen || 4,

                lineNum = this.option.lineNum || 2;

            this.randomText(textLen);

            this.onClick(ctx, textLen, lineNum, cw, ch);

            this.drawLine(ctx, lineNum, cw, ch);

            this.drawText(ctx, this.text, ch);

        }

    },

    onClick: function (ctx, textLen, lineNum, cw, ch) {

        var _ = this;

        this.el.addEventListener("click", function () {

            _.randomText(textLen);

            _.drawLine(ctx, lineNum, cw, ch);

            _.drawText(ctx, _.text, ch);

        }, false)

    },

    // 画干扰线

    drawLine: function (ctx, lineNum, maxW, maxH) {

        ctx.clearRect(0, 0, maxW, maxH);

        for (var i = 0; i < lineNum; i++) {

            var dx1 = Math.random() * maxW,

                dy1 = Math.random() * maxH,

                dx2 = Math.random() * maxW,

                dy2 = Math.random() * maxH;

            ctx.strokeStyle = " rgb(" + 255 * Math.random() + "," + 255 * Math.random() + "," + 255 * Math.random() + ")";

            ctx.beginPath();

            ctx.moveTo(dx1, dy1);

            ctx.lineTo(dx2, dy2);

            ctx.stroke();

        }

    },

    // 画文字

    drawText: function (ctx, text, maxH) {

        var len = text.length;

        for (var i = 0; i < len; i++) {

            var dx = 20 * Math.random() + 20 * i,

                dy = Math.random() * 5 + maxH / 2;

            ctx.fillStyle = " rgb(" + 255 * Math.random() + "," + 255 * Math.random() + "," + 255 * Math.random() + ")";

            ctx.font = " 22px Helvetica";

            ctx.textBaseline = " middle";

            ctx.fillText(text[i], dx, dy);

        }

    },

    // 生成指定个数的随机文字

    randomText: function (len) {

        var source = ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k', 'l', 'm', 'o', 'p', 'q', 'r', 's', 't', 'u', 'v', 'w', 'x', 'y', 'z'];

        var result = [];

        var sourceLen = source.length;

        for (var i = 0; i < len; i++) {

            var text = this.generateUniqueText(source, result, sourceLen);

            result.push(text)

        }
        this.text = result.join("")
        setItem('verify_code', this.text)
    },

    // 生成唯一文字

    generateUniqueText: function (source, hasList, limit) {

        var text = source[Math.floor(Math.random() * limit)];

        if (hasList.indexOf(text) > -1) {

            return this.generateUniqueText(source, hasList, limit)

        } else {

            return text

        }

    }

}

// new Gcode("#canvas_code", {

//     lineNum: 6

// })

export default Gcode